/** @type {import('tailwindcss').Config} */
export default {
  // 使用 "class" 模式时，Tailwind 会将 "dark" 类添加到根元素（通常是 <body> 元素）上，以指示页面当前处于深色模式
  darkMode: "class",
  // 通过配置 content，Tailwind CSS 将会检索和构建包含需要的 CSS 样式的文件，并生成最终的 CSS 输出文件
  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
  theme: {
    screens: {
      xs: "480px",
      sm: "576px",
      md: "768px",
      lg: "992px",
      xl: "1200px",
      "2xl": "1600px",
    },
    colors: {
      black: "#000000",
      green: "#00A76F",
      blue: "#1fb6ff",
      purple: "#7e5bef",
      pink: "#ff49db",
      orange: "#ff7849",
      yellow: "#ffc82c",
      gray: "#637381",
      hover: "#63738114",

      success: "#22C55E",
      warning: "#FFAB00",
      error: "#FF5630",
      info: "#00B8D9",

      code: "#d63384",

      "gray-100": "#F9FAFB",
      "gray-200": "#F4F6F8",
      "gray-300": "#DFE3E8",
      "gray-400": "#C4CDD5",
      "gray-500": "#F9FAFB",
      "gray-600": "#637381",
      "gray-700": "#454F5B",
      "gray-800": "#212B36",
      "gray-900": "#161C24",
    },
    extend: {
      transitionProperty: {
        height: "height",
      },
      animation: {
        "spin-slow": "spin 8s linear infinite",
      },
    },
  },
  corePlugins: {
    // Remove the Tailwind CSS preflight styles so it can use custom base style (src/theme/base.css)
    preflight: false, // https://tailwindcss.com/docs/preflight#disabling-preflight
  },
  plugins: [],
};
